<template>
  <div id="cesiumContainer"></div>
  <div id="loadingOverlay"><h1>Loading...</h1></div>
  <div id="menu">
    <select id="dropDown" ref="dropDownDom" @change="edit">
      <option value="0">Color By Building Material</option>
      <option value="1">Color By Distance To Selected Location</option>
      <option value="2">Highlight Residential Buildings</option>
      <option value="3">Show Office Buildings Only</option>
      <option value="4">Show Apartment Buildings Only</option>
    </select>
    <table class="infoPanel">
      <tbody>
      <tr>
        <td>Click on a building to select as the central location</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import {onMounted} from "vue";

let viewer = null;

onMounted(async () => {
  viewer = buildViewer();
  // addBillboard();
  // setBillboardProperties();
  // changeBillboardProperties();
  // sizeBillboardInMeters();
  // addMultipleBillboards();
  // scaleByDistance()
  // fadeByDistance();
  // addMarkerBillboards();
  disableDepthTest();
  viewer.flyTo(viewer.entities)
})

/**
 * 【阻止地形深度检测】 开启或关闭深度检测 默认是关闭的
 * viewer.scene.globe.depthTestAgainstTerrain = true; // 开启
 * viewer.scene.globe.depthTestAgainstTerrain = false; // 关闭
 * 作用： 让3D对象深度测试（z-buffer)考虑到地形
 *
 * true -> Cesium会使用地形数据来遮挡三维模型以及其他可视化元素
 * false -> 地形不再会影像三维模型和其他可视化元素的深度测试结果，
 * 可能导致三维模型或其他可视化元素穿透地形
 *
 * 开启depthTestAgainstTerrain会增加GPU的负担
 * 因为Cesium需要额外的计算来检查地形是否应该遮挡某个三维模型或其他可视化元素
 * 如场景中没有地形或不需要考虑地形对可视化元素的遮挡效果
 * 可以设置 depthTestAgainstTerrain: false 从而提高性能
 * */
const disableDepthTest = async () => {
  viewer.scene.globe.depthTestAgainstTerrain = true;
  try {
    viewer.terrainProvider = await Cesium.createWorldTerrainAsync();
  } catch (error) {
    console.log('output-> error: ', error)
  }

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
    billboard: {
      image: "../images/facility.gif",
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    }
  });
  viewer.scene.camera.setView({
    destination: new Cesium.Cartesian3(
      -2357576.243142461,
      -3744417.5604860787,
      4581807.855903771
    ),
    orientation: new Cesium.HeadingPitchRoll(
      5.9920811504170475,
      -0.6032820429886212,
      6.28201303164098
    )
  })
}
// 添加带有标识标志的广告牌
const addMarkerBillboards = () => {
  // Add several billboards based on the above image in the atlas
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: "../images/whiteShapes.png",
      imageSubRegion: new Cesium.BoundingRectangle(49, 43, 18, 18),
      color: Cesium.Color.LIME,
    }
  });

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-84.0, 39.0),
    billboard: {
      image: "../images/whiteShapes.png",
      imageSubRegion: new Cesium.BoundingRectangle(61, 23, 18, 18),
      color: new Cesium.Color(0, 0.5, 1.0, 1.0)
    }
  })
}
// 根据距离进行显隐
const fadeByDistance = () => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: "../images/Cesium_Logo_overlay.png",
      translucencyByDistance: new Cesium.NearFarScalar(
        1.5e2,
        2.0,
        1.5e7,
        0.5
      )
    }
  })
}
// 根据距离进行缩放
const scaleByDistance = () => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: "../images/facility.gif",
      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),
    }
  })
}

// 添加多个广告牌
const addMultipleBillboards = () => {
  const logoUrl = "../images/Cesium_Logo_overlay.png";
  const facilityUrl = "../images/facility.gif";

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: logoUrl
    },
  });

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-80.5, 35.14),
    billboard: {
      image: facilityUrl,
    }
  });

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
    billboard: {
      image: facilityUrl,
      scale: 3.0
    }
  })

}

// 设置广告牌单位为米
const sizeBillboardInMeters = () => {
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: "../images/Cesium_Logo_overlay.png",
      sizeInMeters: true, // 设置广告牌的单位尺寸是米还是像素
    }
  })
  viewer.zoomTo(entity)
}

// 改变广告牌属性
const changeBillboardProperties = () => {
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
      -75.59777,
      40.03883,
      300000.0
    ),
    billboard: {
      image: "../images/Cesium_Logo_overlay.png",
    }
  });

  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction((event) => {
    console.log('output-> mousement:: ', event)
    let pick = viewer.scene.pick(event.position); // 获取pick拾取对象
    if (Cesium.defined(pick)) { // 判断是否获取到pick
      console.log('output-> pick::: ', pick)
      const targetBillboard = pick.id.billboard
      targetBillboard.scale = 2.5;
      targetBillboard.color = Cesium.Color.WHITE.withAlpha(0.25);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
// 设置广告牌属性
const setBillboardProperties = () => {
  viewer.entities.add({
    // 获取或设置此广告牌的笛卡尔位置
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: '../images/Cesium_Logo_overlay.png', // default: undefined
      show: true, // default
      // 获取或设置控件中距离此广告牌原点的像素偏移量
      // 用在同一位置对齐多个广告牌和标签
      // eg: 图像和文本
      pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
      eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), //
      // 获取或设置此广告牌的水平原点
      // 确定该广告牌是否在其水平方向上锚位置的左侧、中央或右侧
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 确定该广告牌是否在其垂直方向上锚位置的上、中或下
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      // 获取或设置广告牌的图像大小相乘的统一比例，1.0比例不会更改其大小
      scale: 3, // default: 1.0
      color: Cesium.Color.LIME,
      // 设置此广告牌旋转角度
      rotation: Cesium.Math.PI_OVER_FOUR,
      // 获取或设置世界空间中的对齐轴
      alignedAxis: Cesium.Cartesian3.ZERO,
      width: 100,
      height: 25,
    }
  });
}

// 添加广告牌
const addBillboard = () => {
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
      -75.59777, 40.03883
    ),
    billboard: {
      image: "../images/Cesium_Logo_overlay.png"
    }
  })
  viewer.flyTo(viewer.entities)
}

const buildViewer = () => {
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NTI3OGI2Ni05YmJhLTRlMTYtYjdiNC1hM2E5ZjI1MGYxZmIiLCJpZCI6MTQ0NTcxLCJpYXQiOjE3MDMxNTQ2MzZ9.-ab5sCTIXoyCUMMGv35NQBbR0h7pxsxu78D3AfCVTek";

  viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,
    baseLayerPicker: true,
    fullscreenButton: false,
    vrButton: false,
    geocoder: false,
    homeButton: true, // 首页，点击之后将视图跳转到默认视角
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    scene3DOnly: true,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";
  return viewer;
}

const edit = () => {

}


</script>


<style>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#menu {
  z-index: 999;
  position: absolute;
  top: 20px;
  left: 20px;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: rgb(0, 0, 0, 0);
}
</style>


<!--Cesium中增加广告牌作为点标记



-->
